;
(function () {
    /************************** banner ****************************/
    $('.banner1').banner({
        img: $(".banner1").children(".imgbox").find("a"),
        list: true,
        autoPlay: true,
        delayTime: 2000,
        moveTime: 300
    });

    $('.banner2').banner({
        img: $(".banner2").children(".images").find("a"),
        left: $(".banner2").find("#left"),
        right: $(".banner2").find("#right"),
        list: true,
        autoPlay: true,
        delayTime: 3000,
        moveTime: 300
    });

    /*********************** 下拉菜单 ********************************/
    class Menu {
        constructor(li, ele) {
            this.li = li;
            this.ele = ele;

            this.addEvent();
        }
        addEvent() {
            let that = this;
            this.ele.onmouseenter = function () {
                that.li.style.display = "block";
            }
            this.ele.onmouseleave = function () {
                that.li.style.display = "none";
            }

        }
    }


    new Menu(
        document.querySelector('.tools-left').children[2],
        document.querySelector('.tools-leftfont span')
    );


    /*************商品秒杀********请求数据,渲染页面，分页 ********************/
    class Page {
        constructor(ops) {
            this.url = ops.url
            this.cont = ops.cont;
            this.num = ops.num;
            this.index = ops.index;
            this.left = ops.left;
            this.right = ops.right;

            this.load();
        }
        load() {
            ajaxGet(this.url, (res) => {
                this.res = JSON.parse(res);
                this.display();
                this.createPage();
            });
        }
        display() {
            let str = '';
            for (let i = this.index * this.num; i < (this.index + 1) * this.num; i++) {
                if (i < this.res.length) {
                    str += ` <li>
                            <div class="tu">
                                <img src="${this.res[i].url}" height="140" width="140">
                            </div>
                            <h4 class="title text_ellipsis">${this.res[i].name}</h4>
                            <div class="priceCon">
                                <span class="price">￥${this.res[i].price}</span>
                                <span class="oldPrice">￥${this.res[i].refPrice}</span><br />
                                <span class="soldText">已售45%</span>
                                <a class="button">立即抢购</a>
                            </div>
                        </li>`
                }
            }
            this.cont.innerHTML = str;
        }
        createPage() {
            this.pageNum = Math.ceil(this.res.length / this.num);
            let that = this;
            this.left.onclick = function () {
                if (that.index === 0) {
                    that.index = that.pageNum - 1;
                } else {
                    that.index--;
                }
                that.display();
            }
            this.right.onclick = function () {
                if (that.index === that.pageNum - 1) {
                    that.index = 0;
                } else {
                    that.index++;
                }
                that.display();
            }
        }

    }
    new Page({
        url: "http://localhost/blShop-gulp/src/json/goods.json",
        cont: document.querySelector('.cright ul'),
        left: document.querySelector('.change_li #left1'),
        right: document.querySelector('.change_li #right1'),
        num: 6,
        index: 0
    });


    /********************************楼层************************************/
    $(".floor").children(".go").click(function () {
        var num = $(".vae").eq($(this).index()).offset().top;
        // console.log(num);
        $("html").stop().animate({
            scrollTop: num
        });
    })
    /********************************* 回到顶部*****************************************/
    $(".goTop").click(function () {
        // var Num=$(".Vae").offset().top;
        $("html").stop().animate({
            scrollTop: 0
        }, 1000);
    })

    /********************************到一定位置显示楼层***************************************/
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > 300) {
            $(".floor").fadeIn(1000);
        } else {
            $(".floor").fadeOut(1000);
        }
    })

    /**********************************倒计时****************************************/
    var timer = document.querySelector(".timmer").children;
    var time = +new Date(2020, 7, 30, 0);

    function countDown() {
        var date = +new Date();
        var times = (time - date) / 1000;
        var h = parseInt(times / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        timer[0].innerHTML = h;
        var m = parseInt(times / 60 % 60);
        m = m < 10 ? '0' + m : m;
        timer[1].innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        timer[2].innerHTML = s;
    }
    setInterval(function () {
        countDown();
    }, 1000)


    /*********************请求数据，渲染页面,进入商品详情页，搜索指定商品,排序*******************************/
    class Goodslists {
        constructor() {
            this.url = "http://localhost/blShop-gulp/src/json/goodlists.json";
            this.search = document.querySelector(".text");
            this.btn = document.querySelector(".botton");
            this.cont = document.querySelector(".goodsCon");

            this.clientH = document.documentElement.clientHeight;
            this.scrollH = document.documentElement.scrollHeight;


            this.load();
            this.type = 1;
        }
        load() {
            ajaxGet(this.url, (res) => {
                this.res = JSON.parse((res));
                this.display();
                this.searchAddEvent();
                this.sortAddEvent();
            })
        }
        
        display() {
            let str = '';
            for (let i = 0; i < this.res.length; i++) {
                str += `<li>
                    <div class="pro-show">
                        <div class="pro-img">
                            <a target="_blank" href="http://localhost/blShop-gulp/src/goodsDetails.html?collette=${this.res[i].id}">
                                <img src="${this.res[i].url}" height="220" width="220" alt="">
                            </a>
                        </div>
                        <div class="pro-name">
                            <a href="" target="_blank" title="${this.res[i].name}">${this.res[i].name}
                            </a>
                        </div>
                        <div class="pro-money">
                            <div class="money-fl">￥
                                <span style="font-size:18px;">${this.res[i].price}</span>
                                <a href="" goodsid="${this.res[i].id}" name="collect" class="geta">收藏</a>
                            </div>
                        </div>
                    </div>
                </li>`
            }
            this.cont.innerHTML = str;
        }
        searchAddEvent() {
            let that = this;
            this.search.onkeydown = function (eve) {
                let e = eve || window.event;
                let code = e.keyCode || e.which;
                if (code === 13) {
                    that.val = this.value;
                    that.searchTip();
                }
            }
        }
        searchTip() {
            this.res = this.res.filter(val => {
                return val.name.includes(this.val);
            });
            this.display();
        }
        sortAddEvent() {
            let that = this;
            this.btn.onclick = function () {
                if (that.type == 1) {
                    that.type = 0;
                    this.value = "升序"
                } else {
                    that.type = 1;
                    this.value = "降序"
                }
                that.sortTip(that.type);
            }
        }
        sortTip(d) {
            for (let i = 0; i < this.res.length - 1; i++) {
                let ls = this.res[i];
                let lsIndex = i;
                for (let j = i + 1; j < this.res.length; j++) {
                    if (ls.price - 0 > this.res[j].price - 0) {
                        ls = this.res[j];
                        lsIndex = j;
                    }
                }
                this.res[lsIndex] = this.res[i];
                this.res[i] = ls;
            }
            // this.res=this.res;
            if (d === 0) {
                this.res.reverse();
            }
            this.display();
        }
    }
    new Goodslists();


    /************************搜索框*********************************/
    function jsonp(url, success, data) {
        data = data || {};
        let str = "";
        for (var key in data) {
            str += `${key}=${data[key]}&`;
        }
        let t = new Date().getTime();
        str = str + "__qft=" + t;
        var script = document.createElement("script");
        script.src = url + "?" + str;
        document.body.appendChild(script);

        window[data[data.fieldName]] = function (res) {
            success(res);
        }
    }
    class Search {
        constructor() {
            this.txt = document.querySelector(".text");
            this.list = document.getElementById("list");
            this.url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";

            this.addEvent();
        }
        addEvent() {
            var that = this;
            this.txt.oninput = function () {
                that.val = this.value;
                that.load();
            }
        }
        load() {
            var that = this;
            jsonp(this.url, function (res) {
                // console.log(res.s);
                that.data = res.s;
                that.display();
            }, {
                wd: this.val,
                cb: "asjhdgasj",
                fieldName: "cb"
            })
        }
        display() {
            // console.log(this.data);
            let str = "";
            for (var i = 0; i < this.data.length; i++) {
                str += `<li>${this.data[i]}</li>`;
            }
            this.list.innerHTML = str;
        }
    }

    new Search();


})();